<template>
  <div id="echart" style="height: 300px"></div>
</template>

<script>
import request from "../../http/request";
import { onMounted,  onUnmounted } from "vue";
import * as echarts from "echarts";
import { useRoute } from "vue-router";
export default {
  setup() {
    const route = useRoute();
    let time;
    onMounted(async () => {
      const mychar = echarts.init(document.getElementById("echart"));
      const userInfo = sessionStorage.getItem("userInfo");
      const { data } = await request.cpu({
        user_id: userInfo.user_id,
      });
      let option = {
        xAxis: {
          type: "category", //类目轴
          boundaryGap: false,
          data: data.data[0],
        },
        yAxis: {
          type: "value", //数值轴
          axisLabel: {
            show: true,
            interval: "auto",
            formatter: "{value} %",
          },
        },
        series: [
          {
            data: data.data[1],
            type: "line", //图标类型
            areaStyle: {},
          },
        ],
      };
      mychar.setOption(option);

      // time = setInterval(async () => {
      //   mychar.clear();
      //   const { data } = await request.cpu({
      //     user_id: userInfo.user_id,
      //   });
      //   option = {
      //     xAxis: {
      //       type: "category", //类目轴
      //       boundaryGap: false,
      //       data: data.data[0],
      //     },
      //     yAxis: {
      //       type: "value", //数值轴
      //       axisLabel: {
      //         show: true,
      //         interval: "auto",
      //         formatter: "{value} %",
      //       },
      //     },
      //     series: [
      //       {
      //         data: data.data[1],
      //         type: "line", //图标类型
      //         areaStyle: {},
      //       },
      //     ],
      //   };
      //   mychar.setOption(option);
      // }, 5000);

      window.onresize = () => {
        mychar.resize();
      };
    });

   
  
  },
  beforeRouterEnter(to,from,next){
    // console.log('cpuuuuuu')
  }
};
</script>

<style lang='scss' scoped>
</style>

